<template>
  <div class="auxiliary-right-btn-item">
    <a href="javascript:void(0);" @click="orderToggle()" class="btn-item bg-2">订单</a>
    <el-dialog
      :close-on-click-modal="false"
      title="订单同步"
      :visible.sync="orderDialog"
      width="1200px"
      :append-to-body="true"
    >
      <el-row type="flex" class="row-bg" justify="space-between">
        <div>
          <el-form
            :inline="true"
            :model="orderSearchForm"
            class="demo-form-inline"
            label-width="0px"
            size="small"
          >
            <el-form-item label>
              <el-select v-model="orderSearchForm.goods" placeholder="选择商品" clearable>
                <el-option label="全部商品" value></el-option>
                <el-option :label="g.title" :value="g.id" v-for="g in goodsData" :key="g.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label>
              <el-select v-model="orderSearchForm.status" placeholder="选择状态" clearable>
                <el-option label="全部状态" value></el-option>
                <el-option :label="g.title" :value="g.id" v-for="g in goodsData" :key="g.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button type="primary" size="small" @click="crawlData" :loading="tableLoading">爬取</el-button>
          <el-button
            type="primary"
            size="small"
            @click="orderExportDialog = true"
            :disabled="orderData.length == 0"
          >导出</el-button>
        </div>
      </el-row>
      <div style="min-height:100px;" v-loading="tableLoading">
        <el-table :data="orderData" size="small" style="width: 100%" border>
          <el-table-column
            v-for="h in tHeader"
            :key="h.key"
            :prop="h.value"
            :label="h.label"
            :width="h.with"
            :align="h.align"
          >
            <template slot-scope="scope">
              <el-image
                v-if="h.type == 'img'"
                style="width: 100px; height: 60px"
                :src="scope.row[h.value]"
                fit="scale-down"
              ></el-image>
              <span v-else>{{ scope.row[h.value] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="订单导出"
      :visible.sync="orderExportDialog"
      width="622px"
      :append-to-body="true"
    >
      <div>
        <el-transfer v-model="selectHeader" :data="tHeader" :titles="['待选字段', '已选字段']"></el-transfer>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="orderExportDialog = false" size="small">取 消</el-button>
        <el-button type="primary" @click="exportExcel" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getElementsByAttr } from '../utils/utils'
// import { loadElmBtn, addGood, cleanGood, getGoodsList } from '../utils/good'
import { getOrderList } from '../utils/order'
import { export_json_to_excel } from '../vendor/Export2Excel'
export default {
  data: function () {
    return {
      tableLoading: false,
      orderDialog: false,
      goodsData: [{
        index: 1,
        id: '12313132412',
        img: 'http://www.gov.cn/govweb/c1293/202112/5665879/images/dd12f91c3e4a496dbd0d2ef34dee7734.jpg',
        title: '一只杯子',
        status: 1,
        userName: '张三',
        userPhone: '18912345678',
        userAddress: '湖北省武汉市洪山区雄楚大道93号'
      }],
      orderData: JSON.parse(localStorage.getItem('order_list') || '[]'),
      orderSearchForm: {
        goods: '',
        status: ''
      },
      orderExportDialog: false,
      tHeader: [{
        key: 0,
        value: 'index',
        label: `序号`,
        with: 70,
        align: "center",
        type: 'text',
      }, {
        key: 1,
        value: 'id',
        label: `订单编号`,
        with: 120,
        align: "center",
        type: 'text'
      }, {
        key: 2,
        value: 'img',
        label: `商品图片`,
        with: 160,
        align: "center",
        type: 'img'
      }, {
        key: 3,
        value: 'title',
        label: `商品名称`,
        align: "center",
        type: 'text'
      }, {
        key: 4,
        value: 'status',
        label: `状态`,
        with: 70,
        align: "center",
        type: 'text'
      }, {
        key: 5,
        value: 'userName',
        label: `订单联系人`,
        with: 100,
        align: "center",
        type: 'text'
      }, {
        key: 6,
        value: 'userPhone',
        label: `联系人电话`,
        with: 120,
        align: "center",
        type: 'text'
      }, {
        key: 7,
        value: 'userAddress',
        label: `联系人地址`,
        align: "center",
        type: 'text'
      }],
      selectHeader: []
    }
  },
  mounted() {

  },
  methods: {
    orderToggle() {
      this.orderDialog = !this.orderDialog
    },
    exportExcel() {
      if (this.selectHeader.length == 0) {
        this.$message.error('请选择要导出的字段');
        return false;
      }
      const header = this.selectHeader.map(item => {
        return this.tHeader[item].label
      });
      const data = [];
      const filename = `抖店订单${this.getNowDate()}`;
      for (let index = 0; index < this.orderData.length; index++) {
        const newOrder = [];
        const order = this.orderData[index];
        const keys = this.selectHeader.map(item => {
          return this.tHeader[item].value
        });
        keys.forEach((item) => {
          newOrder.push(order[item])
        });
        data.push(newOrder);
      }
      export_json_to_excel({
        header, // 表头 必填
        data, // 具体数据 必填
        filename, //非必填
        autoWidth: true, //非必填
        bookType: 'xlsx' //非必填
      })
      this.orderExportDialog = false;
    },
    crawlData() {
      this.tableLoading = true;
      getOrderList();
      this.orderData = JSON.parse(localStorage.getItem('order_list') || '[]');
      this.tableLoading = false;

      // this.orderData = [{
      //   index: 1,
      //   id: '12313132412',
      //   img: 'http://www.gov.cn/govweb/c1293/202112/5665879/images/dd12f91c3e4a496dbd0d2ef34dee7734.jpg',
      //   title: '一只杯子',
      //   status: 1,
      //   userName: '张三',
      //   userPhone: '18912345678',
      //   userAddress: '湖北省武汉市洪山区雄楚大道93号'
      // }]
    },
    getNowDate() {
      const nowDate = new Date();
      const year = nowDate.getFullYear();
      const month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1)
        : nowDate.getMonth() + 1;
      const day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate
        .getDate();
      const hours = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate
        .getHours();
      const minutes = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate
        .getMinutes();
      const seconds = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate
        .getSeconds();
      return `${year}-${month}-${day} ${hours}_${minutes}_${seconds}`;
    }
  }
}
</script>

<style scoped>
.auxiliary-right-btn-item {
  width: 36px;
}
.btn-item {
  display: block;
  width: 36px;
  height: 20px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
}
.bg-1 {
  background-color: #f40;
}
.bg-2 {
  background-color: #2700ff;
}
</style>